<template>
  <div>

    <div>
      <van-nav-bar title="我的订单"
                   left-text="返回"
                   @click-left="onClickLeft"
                   left-arrow
      />
    </div>

    <div >
      <van-tabs v-model="active" @change="onChangeTab">
        <van-tab title="全部订单">
          <div v-for="item in orderInfoList" :key="item.orderId" >
            <div style="margin-top: 10px;background-color: white;">
              <div class="columnr">
                <div class="rownr comcss"  @click="onClickCompany(item.companyId)">
                  <div style="padding-top: 3px;">
                    <van-icon name="shop-o" />
                  </div>

                  <label style="padding-left: 10px;">{{item.companyName + ' >'}}</label>
                </div>
                <div class="rownr" @click="onViewDetail(item.orderId)">
                  <img :src="item.imageUrl" width="80" height="80"/>
                  <div class="columnr">
                    <div style="padding-left: 10px;font-size: 16px;">{{item.productname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;">{{item.skuname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;color:#B2B2B2">下单时间：{{item.createTime}}</div>
                  </div>

                  <div class="columnr2">
                    <div style="color: red;font-size: 16px;font-weight: bold;">{{item.totalprice}}元</div>
                    <div style="padding-left: 15px;font-size: 14px;padding-top: 10px;" >共{{item.productnum}}件</div>
                  </div>
                </div>

                <div class="rownr1">
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="#b2b2b2" @click="oncancelOrder(item)" v-if="item.payflag == '0' " >取消订单</van-button>
                  </div>
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="black" @click="onModifyOrder(item)">修改订单</van-button>
                  </div>
                 <!-- <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="red" @click="onPayOrder(item)" v-if="item.payflag != '1'">去支付</van-button>
                  </div>-->
                </div>
              </div>
            </div>

          </div>


        </van-tab>
        <van-tab title="待支付">

          <div v-for="item in orderInfoList" :key="item.orderId" >
            <div style="margin-top: 10px;background-color: white;">
              <div class="columnr">
                <div class="rownr comcss"  @click="onClickCompany(item.companyId)">
                  <div style="padding-top: 3px;">
                    <van-icon name="shop-o" />
                  </div>

                  <label style="padding-left: 10px;">{{item.companyName + ' >'}}</label>
                </div>
                <div class="rownr" @click="onViewDetail(item.orderId)" >
                  <img :src="item.imageUrl" width="80" height="80"/>
                  <div class="columnr">
                    <div style="padding-left: 10px;font-size: 16px;">{{item.productname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;">{{item.skuname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;color:#B2B2B2">下单时间：{{item.createTime}}</div>

                  </div>

                  <div class="columnr2">
                    <div style="color: red;font-size: 16px;font-weight: bold;">{{item.totalprice}}元</div>
                    <div style="padding-left: 15px;font-size: 14px;padding-top: 10px;" >共{{item.productnum}}件</div>
                  </div>
                </div>

                <div class="rownr1">
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="#b2b2b2" @click="oncancelOrder(item)" v-if="item.payflag == '0' " >取消订单</van-button>
                  </div>
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="black" @click="onModifyOrder(item)">修改订单</van-button>
                  </div>
               <!--   <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="red" @click="onPayOrder(item)" v-if="item.payflag != '1'" >去支付</van-button>
                  </div>-->
                </div>
              </div>
            </div>

          </div>

        </van-tab>
        <van-tab title="待发货">

          <div v-for="item in orderInfoList" :key="item.orderId" >
            <div style="margin-top: 10px;background-color: white;">
              <div class="columnr">
                <div class="rownr comcss"  @click="onClickCompany(item.companyId)">
                  <div style="padding-top: 3px;">
                    <van-icon name="shop-o" />
                  </div>

                  <label style="padding-left: 10px;">{{item.companyName + ' >'}}</label>
                </div>
                <div class="rownr" @click="onViewDetail(item.orderId)" >
                  <img :src="item.imageUrl" width="80" height="80"/>
                  <div class="columnr">
                    <div style="padding-left: 10px;font-size: 16px;">{{item.productname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;">{{item.skuname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;color:#B2B2B2">下单时间：{{item.createTime}}</div>

                  </div>

                  <div class="columnr2">
                    <div style="color: red;font-size: 16px;font-weight: bold;">{{item.totalprice}}元</div>
                    <div style="padding-left: 15px;font-size: 14px;padding-top: 10px;" >共{{item.productnum}}件</div>
                  </div>
                </div>

                <div class="rownr1">
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="#b2b2b2" @click="oncancelOrder(item)" v-if="item.payflag == '0' " >取消订单</van-button>
                  </div>
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="black" @click="onModifyOrder(item)">修改订单</van-button>
                  </div>
               <!--   <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="red" @click="onPayOrder(item)" v-if="item.payflag != '1' ">去支付</van-button>
                  </div>-->
                </div>
              </div>
            </div>

          </div>

        </van-tab>
        <van-tab title="已发货">

          <div v-for="item in orderInfoList" :key="item.orderId" >
            <div style="margin-top: 10px;background-color: white;">
              <div class="columnr">
                <div class="rownr comcss" @click="onClickCompany(item.companyId)">
                  <div style="padding-top: 3px;">
                    <van-icon name="shop-o" />
                  </div>

                  <label style="padding-left: 10px;">{{item.companyName + ' >'}}</label>
                </div>
                <div class="rownr" @click="onViewDetail(item.orderId)" >
                  <img :src="item.imageUrl" width="80" height="80"/>
                  <div class="columnr">
                    <div style="padding-left: 10px;font-size: 16px;">{{item.productname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;">{{item.skuname}}</div>
                    <div style="padding-left: 10px;font-size: 14px;padding-top: 10px;color:#B2B2B2">下单时间：{{item.createTime}}</div>

                  </div>

                  <div class="columnr2">
                    <div style="color: red;font-size: 16px;font-weight: bold;">{{item.totalprice}}元</div>
                    <div style="padding-left: 15px;font-size: 14px;padding-top: 10px;" >共{{item.productnum}}件</div>
                  </div>
                </div>

                <div class="rownr1">
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="#b2b2b2" @click="oncancelOrder(item)" v-if="item.payflag == '0' ">取消订单</van-button>
                  </div>
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="black" @click="onModifyOrder(item)" v-if="item.fhStatus != '1' ">修改订单</van-button>
                  </div>
                  <div style="padding-right: 10px;" >
                    <van-button round size="small" plain color="red" @click="onPayOrder(item)" v-if="item.payflag != '1' ">去支付</van-button>
                  </div>
                </div>
              </div>
            </div>

          </div>

        </van-tab>
      </van-tabs>
    </div>


  </div>
</template>

<script>
  import {queryShareInfo,addShareLy,queryShareLy,addShareStoreInfo ,addLyhfinfo,queryAgencyinfo,queryProductSku ,saveAgencyAddress ,queryAgenyAddress , queryAgencyOrder ,cancelAgencyOrder } from 'api/api'
  import {Toast,  Dialog} from 'vant'
  import AreaList from '../../../static/area'
  import eventBus from '../../utils/eventbus'


  export default {
    name: 'myOrder',
    data() {
      return {
        tabid:0 ,
        active:0 ,
        orderInfoList :{},
        pageNum:1 ,
        pageSize:10 ,
      }
    },

    created() {

      let agencyid  = this.$route.query.agencyid



      let tabid   = this.$route.query.tabid

      this.agencyid = agencyid
      this.active = parseInt(tabid)
      this.queryAgencyOrder()


      window.onscroll = function(){
        //变量scrollTop是滚动条滚动时，距离顶部的距离
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        //变量windowHeight是可视区的高度
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        //变量scrollHeight是滚动条的总高度
        var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
        //滚动条到底部的条件
        if(scrollTop+windowHeight >= scrollHeight-40){
          //写后台加载数据的函数
          this.pageNum = this.pageNum + 1
          this.queryProductInfo()
        }
      }

    },
    methods: {

      onClickLeft(){
        this.$router.go(-1) // 返回上一层
      },

      queryAddressList(){

      },

      queryAgencyOrder(){
        let param = {}
        let that  = this

        if(this.active == 1 ){
          param.payflag = '0'
        }

        if(this.active == 2 ){
          param.payflag = '1'
          param.fhStatus = '0'
        }

        if(this.active == 3 ){
          param.fhStatus = '1'
        }
        param.agencyId = this.agencyid
        param.pageNum = this.pageNum
        queryAgencyOrder(param).then(response => {
          let list = response.rows
          this.orderInfoList = that.pageNum == 1 ? response.rows : that.orderInfoList.concat(response.rows )
        });
      },

      onChangeTab(e){

        this.active = e
        this.orderInfoList = []
        this.pageNum = 1
        this.queryAgencyOrder()
      },

      oncancelOrder(item){
        let param = {}
        param.orderId  = item.orderId
        param.yxbz = "0"
        let that = this
        Dialog.confirm({
          title: '提示',
          message: '请确认是否取消订单',
        })
          .then(() => {
            cancelAgencyOrder(param).then(response => {
              if(response.code == 200 ){
                //Toast.success('取消成功')
                Dialog.alert({
                  message: '取消成功',
                }).then(() => {
                  // on close
                  that.queryAgencyOrder()
                });
              }else {
                Dialog.alert({
                  message: '已发货，不能取消',
                }).then(() => {
                  // on close
                });
              }
            });
          })
          .catch(() => {
            // on cancel
          });


      },

      onModifyOrder(item){

        let addressId = item.addressId

        this.$router.push({ path: '/modifyOrder', query:{ orderId :item.orderId , addressId:addressId,agencyid:this.agencyid} })

      },

      onPayOrder(item){
        this.$router.push({ path: '/pay', query:{ orderId :item.orderId , totalPrice:item.totalprice} })
      },

      onViewDetail(orderId){
        this.$router.push({ path: '/orderDetail', query:{ orderId : orderId} })

      },

      onClickCompany(companyId ){
        this.$router.push({ path: '/company', query:{ companyId : companyId} })
      }
    },



  }
</script>

<style scoped>

  .container{
    background-color: white;
  }

  .container1{
    background-color: white;
    margin-top:10px;
  }

  .liuyan{
    background-color: white;
    margin-top: 20px;
    padding-bottom: 60px;
  }
  .columnr{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .columnr2{
    position: absolute;
    right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }


  .rownr{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding-left: 10px;
    padding-top: 10px;
  }

  .rownr1{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    padding-bottom: 20px;
  }


  .name{
    padding-top: 10px;
    padding-left: 10px;
    font-size: 20px;
    color: #466BAC;
  }

  .img{
    padding-top: 10px;
    padding-left: 10px;
  }

  .comcss{
    font-size: 14px;
    font-weight: bold;
  }
  .content{
    font-size: 16px;
    padding:10px;
    text-indent: 2em;
  }

  .viewimg{
    width: 90%;
    padding-top: 10px;
    padding-left: 5%;
    padding-right: 4%;
  }

  .title_bg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px
  }
  .title_sx{
    height: 20px;
    width: 3px;
    background-color: #f50;
  }
  .title_name{
    color:#333333;
    font-size: 20px;
    margin-left: 5px;
    font-weight: bold;
  }

  .hfcontent{
    padding-top: 10px;
    padding-left: 60px;
    font-size: 16px;
  }

  .lyban{
    width: 99%;
    position: fixed;
    bottom: 0;
    height: 50px;
    background-color: #ffffff;
    border-top: 1px solid #B2B2B2 ;
  }

  .lytextcss{
    margin-top:8px;
    margin-left:10px;
    border-radius:15px;
    border: 1px solid #B2B2B2;
    width: 90%;
    height: 30px;
  }

  .textareacss{
    margin-left:10px;
    margin-right:10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: 1px solid #B2B2B2;
  }

  .hfcss{
    padding-left: 60px;
    padding-top: 10px;
    font-size: 16px;
  }

</style>
